<template>
  <div>
    <!-- class="mui-slider mui-fullscreen 布局问题 删除 mui-fullscreen -->
    <!--列表 -->
    <div id="slider" class="mui-slider">
      <div
        id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
      >
        <!-- 懒加载 -->
        <div class="mui-scroll">
          <a
            :class="['mui-control-item',items.id==0?'mui-active':'']"
            href="#item1mobile"
            data-wid="tab-top-subpage-1.html"
            v-for="items in photolist"
            :key="items.id"
            @tap="getpic(items.id)"
          >{{items.title}}</a>
        </div>
      </div>
    </div>
    <!-- 图片                        路由跳转详情页面-->
    <div class="piclist" v-for="item2 in piclist" :key="item2.id">
      <router-link :to="'/home/photoinfo/'+item2.id">
        <ul>
          <li>
            <img v-lazy="item2.img_url">
            <div class="content">
              <p class="p1">{{item2.title}}</p>
              <p class="p2">{{item2.zhaiyao}}</p>
            </div>
          </li>
        </ul>
      </router-link>
    </div>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
// import mui from "../../mui/js/mui.min.js";
export default {
  data() {
    return {
      photolist: [],
      piclist: []
    };
  },
  mounted() {
    //dom元素呗渲染好会执行这个钩子   操作元素尽量在mounted 里操作
    //滑块事件
    this.mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  },
  created() {
    this.getphotolist();
    this.getpic(0); //第一个式全部 默认选0 展示全部
  },
  methods: {
    //列表
    getphotolist() {
      this.$http
        .get("http://www.liulongbin.top:3005/api/getimgcategory")
        .then(result => {
          var result = result.body;
          // console.log(result);
          if (result.status == 0) {
            // console.log("成功");
            result.message.unshift({ title: "全部", id: 0 });
            // console.log(result.message);
            this.photolist = result.message;
            // this.photolist = JSON.parse(JSON.stringify(result.message));
            // console.log(this.photolist);
          } else {
            Toast("加载失败");
          }
        });
    },
    //图片
    getpic(cateid) {
      this.$http
        .get("http://www.liulongbin.top:3005/api/getimages/" + cateid)
        .then(result => {
          var result = result.body;
          // console.log(result);
          if (result.status == 0) {
            // console.log("成功");
            this.piclist = result.message;
          } else {
            Toast("加载失败");
          }
        });
      // console.log(cateid);
    }
  }
};
</script>
<style scoped>
li {
  list-style: none;
}
/* 解决滑动报错 */
/* * {
  touch-action: pan-y;
} */

* {
  margin: 0;
  padding: 0;
}
.piclist {
  padding: 30px;
  padding-bottom: 0px;
}
.piclist ul li {
  position: relative;
  background: #cccccc;
  margin-bottom: 10px;
  text-align: center;
  box-shadow: 1px 1px 5px 1px #cccccc;
}
.piclist ul li img {
  width: 100%;
  vertical-align: middle;
}
/* imgage[lazy="loading"]  改为   img[lazy="loading"]*/ /* 懒加载 */
.piclist ul li img[lazy="loading"] {
  width: 40px;
  height: 300px;
  margin: auto;
}
.piclist ul li .content {
  color: #ffffff;
  position: absolute;
  /* z-index: 1; */
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  max-height: 80px;
}
.piclist ul li .content p {
  opacity: 1;
  color: white;
  text-align: left;
}
.piclist ul li .content .p1 {
  font-size: 14px;
}
.piclist ul li .content .p2 {
  font-size: 13px;
}
</style>
